<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>mxOutline</title><link rel="stylesheet" type="text/css" href="../../styles/main.css"><script language=JavaScript src="../../javascript/main.js"></script><script language=JavaScript src="../../javascript/prettify.js"></script><script language=JavaScript src="../../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();prettyPrint();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.51 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CClass"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="mxOutline"></a>mxOutline</h1><div class=CBody><p>Implements an outline (aka overview) for a graph.&nbsp; Set <a href="#mxOutline.updateOnPan" class=LVariable id=link35 onMouseOver="ShowTip(event, 'tt7', 'link35')" onMouseOut="HideTip('tt7')">updateOnPan</a> to true to enable updates while the source graph is panning.</p><h4 class=CHeading>Example</h4><blockquote><pre class="prettyprint">var outline = new mxOutline(graph, div);</pre></blockquote><p>If an outline is used in an <a href="../util/mxWindow-js.html#mxWindow" class=LClass id=link36 onMouseOver="ShowTip(event, 'tt31', 'link36')" onMouseOut="HideTip('tt31')">mxWindow</a> in IE8 standards mode, the following code makes sure that the shadow filter is not inherited and that any transparent elements in the graph do not show the page background, but the background of the graph container.</p><blockquote><pre class="prettyprint">if (document.documentMode == 8)
{
  container.style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
}</pre></blockquote><p>To move the graph to the top, left corner the following code can be used.</p><blockquote><pre class="prettyprint">var scale = graph.view.scale;
var bounds = graph.getGraphBounds();
graph.view.setTranslate(-bounds.x / scale, -bounds.y / scale);</pre></blockquote><p>To toggle the suspended mode, the following can be used.</p><blockquote><pre class="prettyprint">outline.suspended = !outln.suspended;
if (!outline.suspended)
{
  outline.update(true);
}</pre></blockquote><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#mxOutline" >mxOutline</a></td><td class=SDescription>Implements an outline (aka overview) for a graph. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxOutline.Functions" >Functions</a></td><td class=SDescription></td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.mxOutline" id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">mxOutline</a></td><td class=SDescription>Constructs a new outline for the specified graph inside the given container.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.source" >source</a></td><td class=SDescription>Reference to the source <a href="mxGraph-js.html#mxGraph" class=LClass id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">mxGraph</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.outline" >outline</a></td><td class=SDescription>Reference to the <a href="mxGraph-js.html#mxGraph" class=LClass id=link3 onMouseOver="ShowTip(event, 'tt2', 'link3')" onMouseOut="HideTip('tt2')">mxGraph</a> that renders the outline.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.graphRenderHint" >graphRenderHint</a></td><td class=SDescription>Renderhint to be used for the outline graph. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxOutline.Variables" >Variables</a></td><td class=SDescription></td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.enabled" id=link4 onMouseOver="ShowTip(event, 'tt3', 'link4')" onMouseOut="HideTip('tt3')">enabled</a></td><td class=SDescription>Specifies if events are handled. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxOutline.showViewport" id=link5 onMouseOver="ShowTip(event, 'tt4', 'link5')" onMouseOut="HideTip('tt4')">showViewport</a></td><td class=SDescription>Specifies a viewport rectangle should be shown. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.border" id=link6 onMouseOver="ShowTip(event, 'tt5', 'link6')" onMouseOut="HideTip('tt5')">border</a></td><td class=SDescription>Border to be added at the bottom and right. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxOutline.enabled" >enabled</a></td><td class=SDescription>Specifies the size of the sizer handler. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.labelsVisible" id=link7 onMouseOver="ShowTip(event, 'tt6', 'link7')" onMouseOut="HideTip('tt6')">labelsVisible</a></td><td class=SDescription>Specifies if labels should be visible in the outline. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxOutline.updateOnPan" id=link8 onMouseOver="ShowTip(event, 'tt7', 'link8')" onMouseOut="HideTip('tt7')">updateOnPan</a></td><td class=SDescription>Specifies if <a href="#mxOutline.update" class=LFunction id=link9 onMouseOver="ShowTip(event, 'tt8', 'link9')" onMouseOut="HideTip('tt8')">update</a> should be called for <a href="../util/mxEvent-js.html#mxEvent.PAN" class=LVariable id=link10 onMouseOver="ShowTip(event, 'tt9', 'link10')" onMouseOut="HideTip('tt9')">mxEvent.PAN</a> in the source graph. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.sizerImage" id=link11 onMouseOver="ShowTip(event, 'tt10', 'link11')" onMouseOut="HideTip('tt10')">sizerImage</a></td><td class=SDescription>Optional <a href="../util/mxImage-js.html#mxImage" class=LClass id=link12 onMouseOver="ShowTip(event, 'tt11', 'link12')" onMouseOut="HideTip('tt11')">mxImage</a> to be used for the sizer. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxOutline.minScale" id=link13 onMouseOver="ShowTip(event, 'tt12', 'link13')" onMouseOut="HideTip('tt12')">minScale</a></td><td class=SDescription>Minimum scale to be used. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.suspended" id=link14 onMouseOver="ShowTip(event, 'tt13', 'link14')" onMouseOut="HideTip('tt13')">suspended</a></td><td class=SDescription>Optional boolean flag to suspend updates. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxOutline.forceVmlHandles" id=link15 onMouseOver="ShowTip(event, 'tt14', 'link15')" onMouseOut="HideTip('tt14')">forceVmlHandles</a></td><td class=SDescription>Specifies if VML should be used to render the handles in this control. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxOutline.Functions" >Functions</a></td><td class=SDescription></td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.createGraph" id=link16 onMouseOver="ShowTip(event, 'tt15', 'link16')" onMouseOut="HideTip('tt15')">createGraph</a></td><td class=SDescription>Creates the <a href="mxGraph-js.html#mxGraph" class=LClass id=link17 onMouseOver="ShowTip(event, 'tt2', 'link17')" onMouseOut="HideTip('tt2')">mxGraph</a> used in the outline.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.init" id=link18 onMouseOver="ShowTip(event, 'tt16', 'link18')" onMouseOut="HideTip('tt16')">init</a></td><td class=SDescription>Initializes the outline inside the given container.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.isEnabled" id=link19 onMouseOver="ShowTip(event, 'tt17', 'link19')" onMouseOut="HideTip('tt17')">isEnabled</a></td><td class=SDescription>Returns true if events are handled. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.setEnabled" id=link20 onMouseOver="ShowTip(event, 'tt18', 'link20')" onMouseOut="HideTip('tt18')">setEnabled</a></td><td class=SDescription>Enables or disables event handling. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.setZoomEnabled" id=link21 onMouseOver="ShowTip(event, 'tt19', 'link21')" onMouseOut="HideTip('tt19')">setZoomEnabled</a></td><td class=SDescription>Enables or disables the zoom handling by showing or hiding the respective handle.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.refresh" id=link22 onMouseOver="ShowTip(event, 'tt20', 'link22')" onMouseOut="HideTip('tt20')">refresh</a></td><td class=SDescription>Invokes <a href="#mxOutline.update" class=LFunction id=link23 onMouseOver="ShowTip(event, 'tt8', 'link23')" onMouseOut="HideTip('tt8')">update</a> and revalidate the outline. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.createSizer" id=link24 onMouseOver="ShowTip(event, 'tt21', 'link24')" onMouseOut="HideTip('tt21')">createSizer</a></td><td class=SDescription>Creates the shape used as the sizer.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.getSourceContainerSize" id=link25 onMouseOver="ShowTip(event, 'tt22', 'link25')" onMouseOut="HideTip('tt22')">getSourceContainerSize</a></td><td class=SDescription>Returns the size of the source container.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.getOutlineOffset" id=link26 onMouseOver="ShowTip(event, 'tt23', 'link26')" onMouseOut="HideTip('tt23')">getOutlineOffset</a></td><td class=SDescription>Returns the offset for drawing the outline graph.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.getSourceGraphBounds" id=link27 onMouseOver="ShowTip(event, 'tt24', 'link27')" onMouseOut="HideTip('tt24')">getSourceGraphBounds</a></td><td class=SDescription>Returns the graph bound boxing of the source.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.update" id=link28 onMouseOver="ShowTip(event, 'tt8', 'link28')" onMouseOut="HideTip('tt8')">update</a></td><td class=SDescription>Updates the outline.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.mouseDown" id=link29 onMouseOver="ShowTip(event, 'tt25', 'link29')" onMouseOut="HideTip('tt25')">mouseDown</a></td><td class=SDescription>Handles the event by starting a translation or zoom.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.mouseMove" id=link30 onMouseOver="ShowTip(event, 'tt26', 'link30')" onMouseOut="HideTip('tt26')">mouseMove</a></td><td class=SDescription>Handles the event by previewing the viewrect in &lt;graph&gt; and updating the rectangle that represents the viewrect in the outline.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.getTranslateForEvent" id=link31 onMouseOver="ShowTip(event, 'tt27', 'link31')" onMouseOut="HideTip('tt27')">getTranslateForEvent</a></td><td class=SDescription>Gets the translate for the given mouse event. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxOutline.mouseUp" id=link32 onMouseOver="ShowTip(event, 'tt28', 'link32')" onMouseOut="HideTip('tt28')">mouseUp</a></td><td class=SDescription>Handles the event by applying the translation or zoom to &lt;graph&gt;.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxOutline.destroy" id=link33 onMouseOver="ShowTip(event, 'tt29', 'link33')" onMouseOut="HideTip('tt29')">destroy</a></td><td class=SDescription>Destroy this outline and removes all listeners from <a href="#mxOutline.source" class=LFunction id=link34 onMouseOver="ShowTip(event, 'tt30', 'link34')" onMouseOut="HideTip('tt30')">source</a>.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxOutline.Functions"></a>Functions</h3></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.mxOutline"></a>mxOutline</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>function mxOutline(</td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>container</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs a new outline for the specified graph inside the given container.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="mxGraph-js.html#mxGraph" class=LClass id=link37 onMouseOver="ShowTip(event, 'tt2', 'link37')" onMouseOut="HideTip('tt2')">mxGraph</a> to create the outline for.</td></tr><tr><td class=CDLEntry>container</td><td class=CDLDescription>DOM node that will contain the outline.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.source"></a>source</h3><div class=CBody><p>Reference to the source <a href="mxGraph-js.html#mxGraph" class=LClass id=link38 onMouseOver="ShowTip(event, 'tt2', 'link38')" onMouseOut="HideTip('tt2')">mxGraph</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.outline"></a>outline</h3><div class=CBody><p>Reference to the <a href="mxGraph-js.html#mxGraph" class=LClass id=link39 onMouseOver="ShowTip(event, 'tt2', 'link39')" onMouseOut="HideTip('tt2')">mxGraph</a> that renders the outline.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.graphRenderHint"></a>graphRenderHint</h3><div class=CBody><p>Renderhint to be used for the outline graph.&nbsp; Default is faster.</p></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxOutline.Variables"></a>Variables</h3></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.enabled"></a>enabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.enabled</td></tr></table></blockquote><p>Specifies if events are handled.&nbsp; Default is true.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.showViewport"></a>showViewport</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.showViewport</td></tr></table></blockquote><p>Specifies a viewport rectangle should be shown.&nbsp; Default is true.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.border"></a>border</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.border</td></tr></table></blockquote><p>Border to be added at the bottom and right.&nbsp; Default is 10.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.enabled"></a>enabled</h3><div class=CBody><p>Specifies the size of the sizer handler.&nbsp; Default is 8.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.labelsVisible"></a>labelsVisible</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.labelsVisible</td></tr></table></blockquote><p>Specifies if labels should be visible in the outline.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.updateOnPan"></a>updateOnPan</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.updateOnPan</td></tr></table></blockquote><p>Specifies if <a href="#mxOutline.update" class=LFunction id=link40 onMouseOver="ShowTip(event, 'tt8', 'link40')" onMouseOut="HideTip('tt8')">update</a> should be called for <a href="../util/mxEvent-js.html#mxEvent.PAN" class=LVariable id=link41 onMouseOver="ShowTip(event, 'tt9', 'link41')" onMouseOut="HideTip('tt9')">mxEvent.PAN</a> in the source graph.&nbsp; Default is false.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.sizerImage"></a>sizerImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.sizerImage</td></tr></table></blockquote><p>Optional <a href="../util/mxImage-js.html#mxImage" class=LClass id=link42 onMouseOver="ShowTip(event, 'tt11', 'link42')" onMouseOut="HideTip('tt11')">mxImage</a> to be used for the sizer.&nbsp; Default is null.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.minScale"></a>minScale</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.minScale</td></tr></table></blockquote><p>Minimum scale to be used.&nbsp; Default is 0.0001.</p></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.suspended"></a>suspended</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.suspended</td></tr></table></blockquote><p>Optional boolean flag to suspend updates.&nbsp; Default is false.&nbsp; This flag will also suspend repaints of the outline.&nbsp; To toggle this switch, use the following code.</p><blockquote><pre class="prettyprint">nav.suspended = !nav.suspended;

if (!nav.suspended)
{
  nav.update(true);
}</pre></blockquote></div></div></div>

<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxOutline.forceVmlHandles"></a>forceVmlHandles</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.forceVmlHandles</td></tr></table></blockquote><p>Specifies if VML should be used to render the handles in this control.&nbsp; This is true for IE8 standards mode and false for all other browsers and modes.&nbsp; This is a workaround for rendering issues of HTML elements over elements with filters in IE 8 standards mode.</p></div></div></div>

<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxOutline.Functions"></a>Functions</h3></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.createGraph"></a>createGraph</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.createGraph = function(</td><td class="PParameter  prettyprint " nowrap>container</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates the <a href="mxGraph-js.html#mxGraph" class=LClass id=link43 onMouseOver="ShowTip(event, 'tt2', 'link43')" onMouseOut="HideTip('tt2')">mxGraph</a> used in the outline.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.init"></a>init</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.init = function(</td><td class="PParameter  prettyprint " nowrap>container</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Initializes the outline inside the given container.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.isEnabled"></a>isEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.isEnabled = function()</td></tr></table></blockquote><p>Returns true if events are handled.&nbsp; This implementation returns <a href="#mxOutline.enabled" class=LVariable id=link44 onMouseOver="ShowTip(event, 'tt3', 'link44')" onMouseOut="HideTip('tt3')">enabled</a>.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.setEnabled"></a>setEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.setEnabled = function(</td><td class="PParameter  prettyprint " nowrap>value</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables event handling.&nbsp; This implementation updates <a href="#mxOutline.enabled" class=LVariable id=link45 onMouseOver="ShowTip(event, 'tt3', 'link45')" onMouseOut="HideTip('tt3')">enabled</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>value</td><td class=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.setZoomEnabled"></a>setZoomEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.setZoomEnabled = function(</td><td class="PParameter  prettyprint " nowrap>value</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables the zoom handling by showing or hiding the respective handle.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>value</td><td class=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.refresh"></a>refresh</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.refresh = function()</td></tr></table></blockquote><p>Invokes <a href="#mxOutline.update" class=LFunction id=link46 onMouseOver="ShowTip(event, 'tt8', 'link46')" onMouseOut="HideTip('tt8')">update</a> and revalidate the outline.&nbsp; This method is deprecated.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.createSizer"></a>createSizer</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.createSizer = function()</td></tr></table></blockquote><p>Creates the shape used as the sizer.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.getSourceContainerSize"></a>getSourceContainerSize</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.getSourceContainerSize = function()</td></tr></table></blockquote><p>Returns the size of the source container.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.getOutlineOffset"></a>getOutlineOffset</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.getOutlineOffset = function(</td><td class="PParameter  prettyprint " nowrap>scale</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the offset for drawing the outline graph.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.getSourceGraphBounds"></a>getSourceGraphBounds</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.getSourceGraphBounds = function()</td></tr></table></blockquote><p>Returns the graph bound boxing of the source.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.update"></a>update</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.update = function(</td><td class="PParameter  prettyprint " nowrap>revalidate</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Updates the outline.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.mouseDown"></a>mouseDown</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.mouseDown = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by starting a translation or zoom.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.mouseMove"></a>mouseMove</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.mouseMove = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by previewing the viewrect in &lt;graph&gt; and updating the rectangle that represents the viewrect in the outline.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.getTranslateForEvent"></a>getTranslateForEvent</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.getTranslateForEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Gets the translate for the given mouse event.&nbsp; Here is an example to limit the outline to stay within positive coordinates:</p><blockquote><pre class="prettyprint">outline.getTranslateForEvent = function(me)
{
  var pt = new mxPoint(me.getX() - this.startX, me.getY() - this.startY);

  if (!this.zoom)
  {
    var tr = this.source.view.translate;
    pt.x = Math.max(tr.x * this.outline.view.scale, pt.x);
    pt.y = Math.max(tr.y * this.outline.view.scale, pt.y);
  }

  return pt;
};</pre></blockquote></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.mouseUp"></a>mouseUp</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.mouseUp = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by applying the translation or zoom to &lt;graph&gt;.</p></div></div></div>

<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxOutline.destroy"></a>destroy</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.destroy = function()</td></tr></table></blockquote><p>Destroy this outline and removes all listeners from <a href="#mxOutline.source" class=LFunction id=link47 onMouseOver="ShowTip(event, 'tt30', 'link47')" onMouseOut="HideTip('tt30')">source</a>.</p></div></div></div>

</div><!--Content-->


<div id=Footer><a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->


<div id=Menu><div class=MEntry><div class=MFile><a href="../index-txt.html">API Specification</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Editor</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="../editor/mxDefaultKeyHandler-js.html">mxDefaultKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultPopupMenu-js.html">mxDefaultPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultToolbar-js.html">mxDefaultToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxEditor-js.html">mxEditor</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Handler</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="../handler/mxCellHighlight-js.html">mxCellHighlight</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxCellMarker-js.html">mxCellMarker</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxCellTracker-js.html">mxCellTracker</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxConnectionHandler-js.html">mxConnectionHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxConstraintHandler-js.html">mxConstraintHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxEdgeHandler-js.html">mxEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxEdgeSegmentHandler-js.html">mxEdgeSegmentHandler.js</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxElbowEdgeHandler-js.html">mxElbowEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxGraphHandler-js.html">mxGraphHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxHandle-js.html">mxHandle</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxKeyHandler-js.html">mxKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxPanningHandler-js.html">mxPanningHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxPopupMenuHandler-js.html">mxPopupMenuHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxRubberband-js.html">mxRubberband</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxSelectionCellsHandler-js.html">mxSelectionCellsHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxTooltipHandler-js.html">mxTooltipHandler</a></div></div><div class=MEntry><div class=MFile><a href="../handler/mxVertexHandler-js.html">mxVertexHandler</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Io</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="../io/mxCellCodec-js.html">mxCellCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxChildChangeCodec-js.html">mxChildChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodec-js.html">mxCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodecRegistry-js.html">mxCodecRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultKeyHandlerCodec-js.html">mxDefaultKeyHandlerCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultPopupMenuCodec-js.html">mxDefaultPopupMenuCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultToolbarCodec-js.html">mxDefaultToolbarCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxEditorCodec-js.html">mxEditorCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGenericChangeCodec-js.html">mxGenericChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphCodec-js.html">mxGraphCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphViewCodec-js.html">mxGraphViewCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxModelCodec-js.html">mxModelCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxObjectCodec-js.html">mxObjectCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxRootChangeCodec-js.html">mxRootChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxStylesheetCodec-js.html">mxStylesheetCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxTerminalChangeCodec-js.html">mxTerminalChangeCodec</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent7')">Layout</a><div class=MGroupContent id=MGroupContent7><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent6')">Hierarchical</a><div class=MGroupContent id=MGroupContent6><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">Model</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphAbstractHierarchyCell-js.html">mxGraphAbstractHierarchyCell</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyEdge-js.html">mxGraphHierarchyEdge</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyModel-js.html">mxGraphHierarchyModel</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyNode-js.html">mxGraphHierarchyNode</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxSwimlaneModel-js.html">mxSwimlaneModel</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/mxHierarchicalLayout-js.html">mxHierarchicalLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/mxSwimlaneLayout-js.html">mxSwimlaneLayout</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Stage</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxCoordinateAssignment-js.html">mxCoordinateAssignment</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxHierarchicalLayoutStage-js.html">mxHierarchicalLayoutStage</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxMedianHybridCrossingReduction-js.html">mxMedianHybridCrossingReduction</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxMinimumCycleRemover-js.html">mxMinimumCycleRemover</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxSwimlaneOrdering-js.html">mxSwimlaneOrdering</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCircleLayout-js.html">mxCircleLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCompactTreeLayout-js.html">mxCompactTreeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCompositeLayout-js.html">mxCompositeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxEdgeLabelLayout-js.html">mxEdgeLabelLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxFastOrganicLayout-js.html">mxFastOrganicLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxGraphLayout-js.html">mxGraphLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxParallelEdgeLayout-js.html">mxParallelEdgeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxPartitionLayout-js.html">mxPartitionLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxRadialTreeLayout-js.html">mxRadialTreeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxStackLayout-js.html">mxStackLayout</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent8')">Model</a><div class=MGroupContent id=MGroupContent8><div class=MEntry><div class=MFile><a href="../model/mxCell-js.html">mxCell</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxCellPath-js.html">mxCellPath</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxGeometry-js.html">mxGeometry</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxGraphModel-js.html">mxGraphModel</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../mxClient-js.html">mxClient</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent9')">Shape</a><div class=MGroupContent id=MGroupContent9><div class=MEntry><div class=MFile><a href="../shape/mxActor-js.html">mxActor</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxArrow-js.html">mxArrow</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxArrowConnector-js.html">mxArrowConnector</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxCloud-js.html">mxCloud</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxConnector-js.html">mxConnector</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxCylinder-js.html">mxCylinder</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxDoubleEllipse-js.html">mxDoubleEllipse</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxEllipse-js.html">mxEllipse</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxHexagon-js.html">mxHexagon</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxImageShape-js.html">mxImageShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxLabel-js.html">mxLabel</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxLine-js.html">mxLine</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxMarker-js.html">mxMarker</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxPolyline-js.html">mxPolyline</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxRectangleShape-js.html">mxRectangleShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxRhombus-js.html">mxRhombus</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxShape-js.html">mxShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxStencil-js.html">mxStencil</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxStencilRegistry-js.html">mxStencilRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxSwimlane-js.html">mxSwimlane</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxText-js.html">mxText</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxTriangle-js.html">mxTriangle</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent10')">Util</a><div class=MGroupContent id=MGroupContent10><div class=MEntry><div class=MFile><a href="../util/mxAbstractCanvas2D-js.html">mxAbstractCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxAnimation-js.html">mxAnimation</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxAutoSaveManager-js.html">mxAutoSaveManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxClipboard-js.html">mxClipboard</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxConstants-js.html">mxConstants</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDictionary-js.html">mxDictionary</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDivResizer-js.html">mxDivResizer</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDragSource-js.html">mxDragSource</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEffects-js.html">mxEffects</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEvent-js.html">mxEvent</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEventObject-js.html">mxEventObject</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEventSource-js.html">mxEventSource</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxForm-js.html">mxForm</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxGuide-js.html">mxGuide</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImage-js.html">mxImage</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImageBundle-js.html">mxImageBundle</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImageExport-js.html">mxImageExport</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxLog-js.html">mxLog</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxMorphing-js.html">mxMorphing</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxMouseEvent-js.html">mxMouseEvent</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxObjectIdentity-js.html">mxObjectIdentity</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPanningManager-js.html">mxPanningManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPoint-js.html">mxPoint</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPopupMenu-js.html">mxPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxRectangle-js.html">mxRectangle</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxResources-js.html">mxResources</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxSvgCanvas2D-js.html">mxSvgCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxToolbar-js.html">mxToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUndoableEdit-js.html">mxUndoableEdit</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUndoManager-js.html">mxUndoManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUrlConverter-js.html">mxUrlConverter</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUtils-js.html">mxUtils</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxVmlCanvas2D-js.html">mxVmlCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxWindow-js.html">mxWindow</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxXmlCanvas2D-js.html">mxXmlCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxXmlRequest-js.html">mxXmlRequest</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent11')">View</a><div class=MGroupContent id=MGroupContent11><div class=MEntry><div class=MFile><a href="mxCellEditor-js.html">mxCellEditor</a></div></div><div class=MEntry><div class=MFile><a href="mxCellOverlay-js.html">mxCellOverlay</a></div></div><div class=MEntry><div class=MFile><a href="mxCellRenderer-js.html">mxCellRenderer</a></div></div><div class=MEntry><div class=MFile><a href="mxCellState-js.html">mxCellState</a></div></div><div class=MEntry><div class=MFile><a href="mxCellStatePreview-js.html">mxCellStatePreview</a></div></div><div class=MEntry><div class=MFile><a href="mxConnectionConstraint-js.html">mxConnectionConstraint</a></div></div><div class=MEntry><div class=MFile><a href="mxEdgeStyle-js.html">mxEdgeStyle</a></div></div><div class=MEntry><div class=MFile><a href="mxGraph-js.html">mxGraph</a></div></div><div class=MEntry><div class=MFile><a href="mxGraphSelectionModel-js.html">mxGraphSelectionModel</a></div></div><div class=MEntry><div class=MFile><a href="mxGraphView-js.html">mxGraphView</a></div></div><div class=MEntry><div class=MFile><a href="mxLayoutManager-js.html">mxLayoutManager</a></div></div><div class=MEntry><div class=MFile><a href="mxMultiplicity-js.html">mxMultiplicity</a></div></div><div class=MEntry><div class=MFile id=MSelected>mxOutline</div></div><div class=MEntry><div class=MFile><a href="mxPerimeter-js.html">mxPerimeter</a></div></div><div class=MEntry><div class=MFile><a href="mxPrintPreview-js.html">mxPrintPreview</a></div></div><div class=MEntry><div class=MFile><a href="mxStyleRegistry-js.html">mxStyleRegistry</a></div></div><div class=MEntry><div class=MFile><a href="mxStylesheet-js.html">mxStylesheet</a></div></div><div class=MEntry><div class=MFile><a href="mxSwimlaneManager-js.html">mxSwimlaneManager</a></div></div><div class=MEntry><div class=MFile><a href="mxTemporaryCellStates-js.html">mxTemporaryCellStates</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent12')">Index</a><div class=MGroupContent id=MGroupContent12><div class=MEntry><div class=MIndex><a href="../../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Cookies.html">Cookies</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Events.html">Events</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Variables.html">Variables</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option  id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Cookies">Cookies</option><option value="Events">Events</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Variables">Variables</option></select></div><script language=JavaScript><!--
HideAllBut([11], 13);// --></script></div><!--Menu-->



<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>function mxOutline(</td><td class="PParameter  prettyprint " nowrap>source,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>container</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Constructs a new outline for the specified graph inside the given container.</div></div><div class=CToolTip id="tt2"><div class=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><div class=CToolTip id="tt3"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.enabled</td></tr></table></blockquote>Specifies if events are handled. </div></div><div class=CToolTip id="tt4"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.showViewport</td></tr></table></blockquote>Specifies a viewport rectangle should be shown. </div></div><div class=CToolTip id="tt5"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.border</td></tr></table></blockquote>Border to be added at the bottom and right. </div></div><div class=CToolTip id="tt6"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.labelsVisible</td></tr></table></blockquote>Specifies if labels should be visible in the outline. </div></div><div class=CToolTip id="tt7"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.updateOnPan</td></tr></table></blockquote>Specifies if update should be called for mxEvent.PAN in the source graph. </div></div><div class=CToolTip id="tt8"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.update = function(</td><td class="PParameter  prettyprint " nowrap>revalidate</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Updates the outline.</div></div><div class=CToolTip id="tt9"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">PAN: 'pan'</td></tr></table></blockquote>Specifies the event name for pan.</div></div><div class=CToolTip id="tt10"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.sizerImage</td></tr></table></blockquote>Optional mxImage to be used for the sizer. </div></div><div class=CToolTip id="tt11"><div class=CClass>Encapsulates the URL, width and height of an image.</div></div><div class=CToolTip id="tt12"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.minScale</td></tr></table></blockquote>Minimum scale to be used. </div></div><div class=CToolTip id="tt13"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.suspended</td></tr></table></blockquote>Optional boolean flag to suspend updates. </div></div><div class=CToolTip id="tt14"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.forceVmlHandles</td></tr></table></blockquote>Specifies if VML should be used to render the handles in this control. </div></div><div class=CToolTip id="tt15"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.createGraph = function(</td><td class="PParameter  prettyprint " nowrap>container</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Creates the mxGraph used in the outline.</div></div><div class=CToolTip id="tt16"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.init = function(</td><td class="PParameter  prettyprint " nowrap>container</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Initializes the outline inside the given container.</div></div><div class=CToolTip id="tt17"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.isEnabled = function()</td></tr></table></blockquote>Returns true if events are handled. </div></div><div class=CToolTip id="tt18"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.setEnabled = function(</td><td class="PParameter  prettyprint " nowrap>value</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Enables or disables event handling. </div></div><div class=CToolTip id="tt19"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.setZoomEnabled = function(</td><td class="PParameter  prettyprint " nowrap>value</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Enables or disables the zoom handling by showing or hiding the respective handle.</div></div><div class=CToolTip id="tt20"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.refresh = function()</td></tr></table></blockquote>Invokes update and revalidate the outline. </div></div><div class=CToolTip id="tt21"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.createSizer = function()</td></tr></table></blockquote>Creates the shape used as the sizer.</div></div><div class=CToolTip id="tt22"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.getSourceContainerSize = function()</td></tr></table></blockquote>Returns the size of the source container.</div></div><div class=CToolTip id="tt23"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.getOutlineOffset = function(</td><td class="PParameter  prettyprint " nowrap>scale</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the offset for drawing the outline graph.</div></div><div class=CToolTip id="tt24"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.getSourceGraphBounds = function()</td></tr></table></blockquote>Returns the graph bound boxing of the source.</div></div><div class=CToolTip id="tt25"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.mouseDown = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by starting a translation or zoom.</div></div><div class=CToolTip id="tt26"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.mouseMove = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by previewing the viewrect in graph and updating the rectangle that represents the viewrect in the outline.</div></div><div class=CToolTip id="tt27"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.getTranslateForEvent = function(</td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Gets the translate for the given mouse event. </div></div><div class=CToolTip id="tt28"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class="PBeforeParameters  prettyprint "nowrap>mxOutline.prototype.mouseUp = function(</td><td class="PParameter  prettyprint " nowrap>sender,</td></tr><tr><td></td><td class="PParameter  prettyprint " nowrap>me</td><td class="PAfterParameters  prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by applying the translation or zoom to graph.</div></div><div class=CToolTip id="tt29"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxOutline.prototype.destroy = function()</td></tr></table></blockquote>Destroy this outline and removes all listeners from source.</div></div><div class=CToolTip id="tt30"><div class=CFunction>Reference to the source mxGraph.</div></div><div class=CToolTip id="tt31"><div class=CClass>Basic window inside a document.</div></div><!--END_ND_TOOLTIPS-->




<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>


<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>